<script setup>
import OrderItem from './component/OrderItem.vue'
import {getOrderList} from "@/api/order.js";
import { useI18n} from 'vue-i18n';
import noDataImg from "@/assets/image/com_empty.png";
const { t } = useI18n();

const keyWord = ref('')
const query = ref({
  pageSize: 5,
  pageNum: 1,
  type: null,
  key: ''
})
const tabIndex = ref(0)
const tabList = ref([
  {
    name: t('order.fullOrder'),
    value: null
  },
  {
    name: t('order.due'),
    value: 0
  },
  {
    name: t('order.goodsWaitingToBeSent'),
    value: 1
  },
  {
    name: t('order.waitToBeReceived'),
    value: 2
  },
  {
    name: t('order.cancelled'),
    value: -1
  },
  {
    name: t('order.completed'),
    value: 3
  }
])
// 切换tab
function changeTab(item, index) {
  isEmpty.value = false
  finished.value = false
  if (query.value.type === item.value) {
    return
  }
  orderList.value = []
  query.value.type = item.value;
  query.value.pageNum = 1
  tabIndex.value = index;
  getOrderListFn()
}
// 获取订单列表数据
// 分页加载
const loading = ref(false)
const finished = ref(false)
const orderList = ref([])
const allNumber = ref(0)
const isEmpty = ref(false)
function getOrderListFn() {
  loading.value = true
  getOrderList(query.value).then(res => {
    loading.value = false
    const {rows, total} = res
    orderList.value = orderList.value.concat(rows);
    if (!orderList.value.length) {
      isEmpty.value = true
    }
    if (orderList.value.length >= total) {
      finished.value = true
    }
  })
}
function search() {
  query.value.pageNum = 1
  getOrderListFn()
}
function restGetList() {
  query.value.pageNum = 1
  orderList.value = []
  getOrderListFn()
}

function onLoad() {
  query.value.pageNum += 1;
  getOrderListFn()
}

onMounted(() => {
  getOrderListFn()
})
const onShowSizeChange = (pageNum, pageSize) => {
  getOrderListFn()
};
</script>
<template>
  <div class="order">
    <h3>{{t('order.title')}}</h3>
    <div class="order-top">
      <div class="order-tab" :class="{overlay: loading}">
        <div class="tab-item" v-for="(item, index) of tabList" :key="index" :class="{active: tabIndex === index}" @click="changeTab(item, index)">{{item.name}}</div>
      </div>
    </div>
    <div class="list-box" id="loading">
      <div class="order-list">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            :finished-text="isEmpty ? '' : $t('commodity.noMore')"
            :loading-text="$t('commodity.loading')"
            @load="onLoad"
        >
          <order-item v-for="item of orderList" :key="item.id" :item="item" @rest="restGetList"></order-item>
        </van-list>
      </div>
      <div class="empty" v-if="isEmpty">
        <van-empty
            :image="noDataImg"
            :description="t('order.noOrder')"
            image-size="80">
        </van-empty>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.order {
  padding: 0 16px;
  h3 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  .order-top {
    .order-tab {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      overflow-x: auto;
      position: relative;
      .tab-item {
        font-weight: 400;
        font-size: 14px;
        color: #262626;
        height: 44px;
        line-height: 44px;
        cursor: pointer;
        font-weight: 500;
        margin-right: 30px;
        flex-shrink: 0;
      }
      .active {
        color: #262626;
        border-bottom: #262626 solid 2px;
      }
    }
    .overlay:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
    }
    .order-tab::-webkit-scrollbar {
      display: none;
    }
    .order-search {
      height: 36px;
      border-radius: 2px;
      align-items: center;
      .search-btn {
        padding-left: 10px;
        border-left: #cccccc solid 1px;
        cursor: pointer;
      }
    }
    .icon-sousuo {
      color: #8C8C8C;
    }
  }
  .list-box {
    position: relative;
  }
}
</style>
